<template>
  <div class="innerBox" @scroll="checkScroll">
    <!-- 创建论坛 -->
    <creatForum v-if="!pueryForm.userId" @getList="getForumList"></creatForum>
    <!-- 创建论坛 -->
    <div v-if="isPicture" class="scollBox">
      <div class="itemBox" v-for="item in porumsList">

        <!--        删除-->
        <i class="el-icon-delete forumDeleteBtn" v-show="rolesId.includes(1)||item.userId==userId"
           @click="deleteForumsBtn(item.forumId)"></i>

        <!--        删除-->


        <!-- 用户信息 -->
        <div class="top" >
          <div class="left">
            <!-- 头像 -->
            <div @click="goPersonalHomePage(item.sysUser.userId)">
              <el-avatar size="large" :src="item.sysUser&&item.sysUser.avatar"></el-avatar>
            </div>
            <!-- 头像 -->
            <!-- 用户名 -->
            <div>
              <div>{{ item.sysUser.nickName }}</div>
              <div>{{ item.createTime }}
                &nbsp;&nbsp;来自：{{
                  item.reserve1 == 'XX XX'
                    ? "未知"
                    : item.reserve1
                }}
              </div>
            </div>
            <!-- 用户名 -->
          </div>
          <span class="right"></span>
        </div>
        <!-- 用户信息 -->
        <!-- 文字消息 -->
        <div class="centent">
          <div class="innerCentent">
            <div class="text" v-html="setArray(item.textDocument)"></div>
            <div class="cententImg">
              <el-image
                v-for="innerItem in item.fileList"
                :key="innerItem"
                :src="innerItem"
                fit="cover"
                :preview-src-list="item.fileList"
              >
              </el-image>
            </div>
            <!-- 控件 -->
            <div class="btn">


              <div></div>
              <div>
                <img
                  src="@/assets/images/评论.png"
                  alt=""
                  @click="commentBtn(item)"
                /><span>
                  {{ item.commentCount ? item.commentCount : "评论" }}</span
              >
              </div>
              <div>
                <img
                  src="@/assets/images/点赞.png"
                  alt=""
                  v-if="!item.isUpvote"
                  @click="upvote(item, 'add')"
                />
                <img
                  src="@/assets/images/已点赞.png"
                  alt=""
                  v-else
                  @click="upvote(item, 'delete')"
                /><span>
                  {{ item.upvoteCount ? item.upvoteCount : "点赞" }}</span
              >
              </div>
            </div>
            <!-- 控件 -->
          </div>
        </div>

        <!-- 文字消息 -->
      </div>

      <div v-if="absence" class="loadMore">到底了</div>
      <div v-else ref="loadMore" class="loadMore">加载更多</div>
      <el-backtop target=".innerBox" :right="200"></el-backtop>
    </div>
    <comment :obj="obj"></comment>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import creatForum from "./pcComponents/createForum.vue";
import {setForumsList, addLike, deletaLike, deletaForums} from "@/api/forum";
import comment from "./pcComponents/comment.vue";
import {getHomePageMyUpVoteComment} from "@/api/homePgae";

export default {
  components: {comment, creatForum},
  props:{
    type:String,
    default:'aaa'
  }
  ,
  data() {
    return {
      pueryForm: {
        pageNum: 1,
        pageSize: 10,
      },
      porumsList: [],
      isPicture: true,
      obj: {
        dialogVisible: false,
        ids: 0,
      },
      total: 0,
      jieliu: true,//节流
    };
  },
  mounted() {
    // this.getForumList();
    if (this.type == 'vote') {
      this.getUpvoteList()
    } else {
      this.getForumList();

    }
  },
  created() {
    console.log(this.$route, 'userId')
    if (this.$route.query.userId) {
      this.pueryForm.userId = this.$route.query.userId
    }
  },
  computed: {
    ...mapGetters(["userId", 'rolesId']),
    absence: function () {
      if (this.porumsList.length >= this.total) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    checkScroll() {


      if (this.jieliu) {
        //容器高度
        const scrollContainer =
          document.getElementsByClassName("main-container")[0].offsetHeight;
        //距离底部的高度
        if (!this.$refs.loadMore) return
        const bottom = this.$refs.loadMore.getBoundingClientRect().bottom;

        if (bottom - 5 <= scrollContainer) {

          if (this.absence) {
            this.$message({
              message: "到底了",
              type: "success",
            });
          } else {
            this.jieliu = false
            this.pueryForm.pageNum++;
            this.getForumList()
          }

        }

      }


    },
    //获取论坛列表
    getForumList(type = 2) {
      if (type == 1) {
        setForumsList(this.pueryForm).then((res) => {
          console.log(res);
          if (res.code === 200) {
            res.rows.map((ele) => {
              let arr = [];
              if (ele.fileAddress1) {
                arr.push(ele.fileAddress1);
              }
              if (ele.fileAddress2) {
                arr.push(ele.fileAddress2);
              }
              if (ele.fileAddress3) {
                arr.push(ele.fileAddress3);
              }
              if (ele.fileAddress4) {
                arr.push(ele.fileAddress4);
              }
              if (ele.fileAddress5) {
                arr.push(ele.fileAddress5);
              }
              if (ele.fileAddress6) {
                arr.push(ele.fileAddress6);
              }
              if (ele.fileAddress7) {
                arr.push(ele.fileAddress7);
              }
              if (ele.fileAddress8) {
                arr.push(ele.fileAddress8);
              }
              if (ele.fileAddress9) {
                arr.push(ele.fileAddress9);
              }
              ele["fileList"] = arr;
            });
            this.porumsList = res.rows
            this.total = res.total;

          }
        });
      } else {
        setForumsList(this.pueryForm).then((res) => {
          console.log(res);
          if (res.code === 200) {
            res.rows.map((ele) => {
              let arr = [];
              if (ele.fileAddress1) {
                arr.push(ele.fileAddress1);
              }
              if (ele.fileAddress2) {
                arr.push(ele.fileAddress2);
              }
              if (ele.fileAddress3) {
                arr.push(ele.fileAddress3);
              }
              if (ele.fileAddress4) {
                arr.push(ele.fileAddress4);
              }
              if (ele.fileAddress5) {
                arr.push(ele.fileAddress5);
              }
              if (ele.fileAddress6) {
                arr.push(ele.fileAddress6);
              }
              if (ele.fileAddress7) {
                arr.push(ele.fileAddress7);
              }
              if (ele.fileAddress8) {
                arr.push(ele.fileAddress8);
              }
              if (ele.fileAddress9) {
                arr.push(ele.fileAddress9);
              }
              ele["fileList"] = arr;
            });
            this.porumsList.push(...res.rows);
            this.total = res.total;
            this.jieliu = true

          }
        });
      }


    },
    //点赞
    upvote(item, type) {
      let obj = {
        forumId: item.forumId,
        userId: this.userId,
      };
      console.log(obj);
      if (type === "add") {
        addLike(obj).then((res) => {
          if (res.code === 200) {
            item.isUpvote = true;
            item.upvoteCount++;
            item.upvoteId = res.data.upvoteId;
          }
        });
      }
      if (type === "delete") {
        deletaLike(item.upvoteId).then((res) => {
          if (res.code === 200) {
            item.isUpvote = false;
            item.upvoteCount--;
          }
        });
      }
    },
    //评论
    commentBtn(item) {
      this.obj = {dialogVisible: true, ids: item.forumId};
    },
    //去除中括号
    setArray(item) {
      return item.replace(/\[|\]/g, '');
    },
    //删除论坛
    deleteForumsBtn(item) {
      this.$confirm('此操作将永久删除该论坛, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletaForums(item).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.pueryForm = {
              pageNum: 1,
              pageSize: 10,
            }
            this.getForumList(1)
          }
        })
      })
    },

    //去个人主页
    goPersonalHomePage(item) {
      console.log(item, this.userId, 'userid')
      this.$router.push({
        path: "/personalHomepage/personalHomepage",
        query: {
          userId: item,
          type: this.userId == item ? 0 : 1
        },
      });
    },

    //获取点赞过的论坛列表
    getUpvoteList() {
      getHomePageMyUpVoteComment({userId: this.userId}).then(res => {
        if (res.code === 200) {
          res.rows.map((ele) => {
            let arr = [];
            if (ele.fileAddress1) {
              arr.push(ele.fileAddress1);
            }
            if (ele.fileAddress2) {
              arr.push(ele.fileAddress2);
            }
            if (ele.fileAddress3) {
              arr.push(ele.fileAddress3);
            }
            if (ele.fileAddress4) {
              arr.push(ele.fileAddress4);
            }
            if (ele.fileAddress5) {
              arr.push(ele.fileAddress5);
            }
            if (ele.fileAddress6) {
              arr.push(ele.fileAddress6);
            }
            if (ele.fileAddress7) {
              arr.push(ele.fileAddress7);
            }
            if (ele.fileAddress8) {
              arr.push(ele.fileAddress8);
            }
            if (ele.fileAddress9) {
              arr.push(ele.fileAddress9);
            }
            ele["fileList"] = arr;
            ele['obj'] = {dialogVisible: false, ids: ele.forumId}
          });
          this.porumsList.push(...res.rows);
          this.total = res.total;
          this.jieliu = true

        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.innerBox {
  width: 100%;
  /* min-width: 640px; */
  height: 100%;
  /* padding: 0 500px; */
  overflow: auto;

  .scollBox {
    height: 100%;
    margin: 0 auto;
    width: 750px;
  }

  .itemBox {
    /* min-height: 300px; */
    min-height: min-content;
    background-color: white;
    margin-bottom: 15px;
    min-width: 600px;
    padding: 15px;
    position: relative;

    .forumDeleteBtn {
      color: red;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    > .top {
      height: 80px;
      /* background-color: red; */
      display: flex;

      > .left {
        display: flex;

        > div:nth-of-type(1) {
          width: 60px;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;

          > span {
            width: 3.25rem;
            height: 3.25rem;
          }
        }

        > div:nth-of-type(2) {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 15px 0;

          > div:nth-of-type(1) {
            font-size: 18px;
            font-weight: bold;
          }

          > div:nth-of-type(2) {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }

    .centent {
      display: flex;

      > .innerCentent {
        margin-left: 60px;
        /* background-color: red; */
        flex: 1;

        .cententImg {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          margin-top: 10px;

          > .el-image {
            margin-bottom: 10px;
            width: 133px;
            height: 133px;
            margin-left: 8px;
          }
        }

        > .btn {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          margin-top: 10px;

          > div {
            width: 60px;
            display: flex;
            align-items: center;
          }

          img {
            height: 20px;
            width: 20px;
            cursor: pointer;
            margin-right: 5px;
          }
        }
      }
    }
  }
}


.loadMore {
  text-align: center;
  line-height: 30px;
  padding-bottom: 15px;
}
</style>
